<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    //利用页面加载事件，使方法在页面加载完成之后才开始执行
    //onload事件会在整个页面加载完成后才触发
    //为windows绑定一个onload事件
    //该事件对应的响应函数将会在页面加载完成之后执行
    //这样可以确保我们的代码执行时所有的DOM对象已经加载完毕
    window.onload=function()
    {
        //为id为btn的按钮绑定一个单机响应函数，也就是btn.onclick
        var btn=document.getElementById("btn");
        btn.onclick=function()
        {
            //首先查找节点,并且为查找到的节点设定一个变量
            //getElementById()可以查找单个节点
            var yourmother=document.getElementById("yourmother");
            //打印获取到的节点
            //innerHTML属性可以直接获取到元素内部的HTML代码
            console.log(yourmother.innerHTML);
        };

        //为id为btn2的按钮绑定一个单机响应函数，也就是btn2.onclick
        var btn2=document.getElementById("btn2");
        btn2.onclick=function()
        {
            //首先查找所有li节点
            //getElementsByTagName()可以根据标签签名来获取一组元素节点对象
            //这个方法会给我们返回一个类数组对象，查询里面的元素可以使用数组方法来查询
            var listtext=document.getElementsByTagName("li");

            //打印listtext
           //alert(listtext.length);
           for(var i=0;i<listtext.length;i++)
           {
               console.log(listtext[i].innerHTML);
           }
        };

        //为id为btn3的按钮绑定一个单击响应函数，也就是btn3.onclick
        var btn3=document.getElementById("btn3");
        btn3.onclick=function()
        {
            //先找到所有的h1节点
            //getElementsByTagName()可以根据标签签名来获取一组元素节点对象
            var h1text=document.getElementsByTagName("h1");

            //打印h1text
            for(var i=0;i<h1text.length;i++)
            {
                console.log(h1text[i].innerHTML);
            }

        };
        
        //为id为btn3的按钮绑定一个单击响应函数，也就是btn3.onclick
        var btn4=document.getElementById("btn4");
        btn4.onclick=function()
        {
            //先找到所有的li节点
            //getElementsByTagName()可以根据标签签名来获取一组元素节点对象
            //先给所有的li节点设置一个name="gender"的属性 然后根据此属性来获取所要的对象
            var litext=document.getElementsByName("gender");

            //打印h1text
            for(var i=0;i<litext.length;i++)
            {
                console.log(litext[i].innerHTML);
                //元素的id name value都可以使用元素节点读取，但是class属性不能用这种方式读取
            }

        };
    };
    </script>
</head>
<body>
    <!--<button id="btn">点我一下</button>
    <script type="text/javascript">
    //获取id为btn的摁钮
    var btn=document.getElementById("btn");
    //为摁钮绑定一个单机响应函数
    btn.onclick=function()
    {
        alert("hello");
    };
    //文档从上到下加载，如果把JS卸载head里面，那么就无法加载到摁钮
    </script>-->

    <button id="btn">单个节点内容查询</button>
    <button id="btn2">一组节点内容查询</button>
    <button id="btn3">一组节点内容查询</button>
    <button id="btn4">同一name的节点内容查询</button>
    <h1 id="yourmother">拉拉拉</h1>
    <ul id="list">
        <li name="gender" value=1>语文课</li>
        <li name="gender" value=1>数学课</li>
        <li name="gender">英语课</li>
        <li name="gender">物理课</li>
    </ul>
    <h1>yourmother</h1>
    <h1>yourfather</h1>
    <h1>yourgrandmother</h1>
    <h1>yourgrandfather</h1>
</body>
</html>